<template>
    <div>
        <div class="standard-item">
            <div class="standard-name"
                 @click="showChild(item.DeptId,item)">
                <span>{{item.checkTitleNames}}</span>
                <em>共计{{item.checkProblemNums}} 条隐患</em>
                <i class="iconfont icon-jinru"
                   :class="{'open':item.open}"></i>
            </div>
            <div class="dele"
                 v-show="item.open">
                <ul>
                    <li class="list-item "
                        v-for="(data,index) in item.problemSummaries"
                        :key="index"
                        style="margin-top:0">
                        <div class="list-box">
                            <div class="list_Left">
                                <h2>{{data.No}} </h2>
                                <p class="name_p">{{data.Description}} </p>
                                <h5>
                                    <span :class="data.HdLevel=='一般隐患'?'n2':'n1'">【{{data.HdLevel}}】</span>
                                    <em v-if="data.StateDesc">【{{data.StateDesc}}】</em>
                                </h5>
                            </div>
                            <div class="list_Right"
                                 @click="$router.push({path:'./view2Verify',query:{id:data.Id}})">
                                <img :src="data.ProblemImgs[0]"
                                     alt="">
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'standardItem',
    props: {
        item: Object,
        showChild: Function,
        selectStandard: Function
    }
}
</script>
<style lang="less" scoped>
.standard-item {
    background: #fff;
}
.standard-name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0 24px 10px;
    margin-right: 10px;
    position: relative;
}
.standard-name span {
    color: #333;
    font-size: 13px;
    line-height: 16px;
}
.standard-name em {
    position: absolute;
    color: #333;
    font-size: 13px;
    line-height: 16px;
    right: 20px;
    color: #ff7034;
}
.standard-name i {
    transform: rotate(90deg);
}
.standard-item .open {
    transform: rotate(-90deg);
}
.standard-item ul {
}
.standard-item li {
    display: flex;
    align-items: center;
    min-height: 55px;
    /* padding: 10px 20px 10px 0; */
    padding-left: 10px;
    border-top: 1px solid #efeff4;
    font-size: 13px;
}
.standard-item li .standard-name {
    min-height: 55px;
    padding: 0;
    margin-right: 0;
}
.standard-item li .checkbox {
    margin-right: 10px;
    font-size: 16px;
}
.standard-item li .icon-selected {
    color: #2269ff;
}
// .standard-item p {
//     display: flex;
//     line-height: 22px;
//     color: #333;
//     padding-right: 20px;
// }
.standard-item li > div {
    flex: 1;
    padding-right: 20px;
}
.dele {
    overflow: hidden;
    background-color: #fff;
    .list-item {
        position: relative;
        height: 120px;
        -webkit-transition: all 0.2s;
        transition: all 0.2s;
        border-bottom: 1px solid #eee;
        .list-box {
            padding: 0 10px;
            display: flex;
            align-items: center;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            justify-content: flex-end;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            font-size: 0;
            .list_Left {
                float: left;
                width: 220px;
                height: 120px;
                h2 {
                    width: 220px;
                    font-size: 14px;
                    font-weight: normal;
                    margin-top: 14px;
                    color: #999;
                }
                .name_p {
                    font-size: 14px;
                    width: 220px;
                    height: 22px;
                    line-height: 22px;
                    overflow: hidden; // 超出部分隐藏
                    text-overflow: ellipsis; // 文字超出部分...
                    white-space: nowrap; // 内容超宽后禁止换行显示
                    margin-top: 14px;
                    color: #333;
                }
                h5 {
                    margin-top: 14px;
                    font-size: 16px;
                    width: 100%;
                    em {
                        color: #ffb400;
                    }
                }
            }
            .list_Right {
                width: 150px;
                height: 126px;
                float: right;
                padding: 14px 0;
                img {
                    width: 100%;
                    height: 100%;
                    // border: 1px solid #fff;
                    border-radius: 5px;
                }
            }
        }
    }
    .n1 {
        color: #fe0100;
    }
    .n2 {
        color: #ff7034;
        font-size: 12px;
    }
}
</style>
